<template>
    <div id="root">
        <el-button class="file-box">
            <input type="file" multiple class="file-btn" required @change="handleFileImport"/>上传文件  
        </el-button>
        <button @click="importFile">导入文件</button>
    </div>
</template>

<script>
    import bus from '@/utils/bus';
    import { nanoid } from 'nanoid';

    export default {
        name: 'Txt',
        props: ['sides', 'points'],
        setup() {
            let selectedFile =  null;

            // 获取第一个选择的文件对象
            function handleFileImport(event) {
                selectedFile = event.target.files[0];
                if(selectedFile !== null) {
                    alert('文件导入成功，请点击“导入文件”按钮生成图');
                }
                else {
                    alert('文件导入失败，请重新导入')
                }
            }
            
            //
            function importFile() {
                if (selectedFile) {
                    // 使用FileReader对象读取文件内容
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        const fileContent = event.target.result; // 获取文件内容
                        const regex = /<([^,]+),([^>]+)>/g;
                        let start = [];
                        let end = [];
                        let matches;

                        while ((matches = regex.exec(fileContent)) !== null) {
                            const side = {id: nanoid(), title: matches[0], choose: false};
                            const s = matches[1];
                            const e = matches[2];
                            bus.emit('addside_txt', side);
                            start.push(s);
                            end.push(e);
                        }
                        const merged = start.concat(end);
                        //过滤merged数组里重复的点
                        let unique = [...new Set(merged)];

                        for(let i = 0; i < unique.length; i++) {
                            const point = {id: nanoid(), title: unique[i], choose: false, color: 'aqua', x: Math.random() * 901, y: Math.random() * 501, isactive: false, indegree: 0, linkpoint: []};
                            for(let j = 0; j < end.length; j++) {
                                if(point.title === end[j]) {
                                    point.indegree++;
                                    point.linkpoint.push(start[j]);
                                }
                            } 
                            bus.emit('addpoint_txt', point);
                        }
                    }   
                    reader.readAsText(selectedFile); // 以文本形式读取内容
                }
                else {
                    alert("请先选择文件");
                }
            }

            return {
                handleFileImport,
                importFile
            }
        }
    }
</script>

<style scoped>
#root{
    height: 10%;
    display: flex;
}
#root button{
    width: 6rem;
    height: 2rem;
    margin-right: 1rem;
    margin-top: 1.225rem;
    color: #fff;
    background: linear-gradient(to right, #b6a19e, #6c648b);
    border: 1px solid #ddd;
    border-radius: .3125rem;
    cursor: pointer;
}
.file-box {
    width: 6rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: .825rem;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-right: 1rem;
    margin-top: 1.225rem;
    border: 1px solid #ddd;
    color: #fff;
    background: linear-gradient(to right, #b6a19e, #6c648b);
    border-radius: .3125rem;
}
.file-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    outline: none;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
</style>